import React, { Component } from 'react';

// 引入mockjs 
import Mock from "mockjs";
// 模拟轮播图图片 
let data = Mock.mock({
  "pics|5": [{
    "id": "@id",
    "children": [{
      "id": "@id",
      "img": "@image(375x90,@color)"
    }]

  }]
})


export class Swiper extends Component {
  constructor(props) {
    super(props)
    this.state = {
      img: data.pics,
      active: 0, //高亮下标，默认为0
    }

  }
  render() {
    const { img, active } = this.state;
    return (
      <div className='swiper'>
        <ul className='cot'>
          {
            img.map((item, index) => {
              return <li key={item.id}
                onClick={() => {
                  console.log("index",index);
                  this.setState({
                    active: index
                  })
                }}
                className={index === active ? "bg" : ""}
              >
              </li>
            })
          }
        </ul>
        <ol className='pic'>
          {
            img[active].children.map(item => {
              return <li key={item.id}>
                <img src={item.img} alt="" />
              </li>
            })
          }
        </ol>
      </div>
    )
  }
}

export default Swiper